<template>
	<view class="address">
		<view class="top-tips">示例: 张三 13500000000 广东省 广州市 天河区xx镇xx路xx号。识别后请仔细检查地址是否有误，以免下单失败，邮寄错误!</view>
		<view class="copy">
			<textarea class="copy-input" v-model="copyAddress"  placeholder="粘贴地址信息，自动拆分姓名、手机号和地址，姓名、手机号、省、市用空格分开。例: 张三 13500000000 广东省 广州市 天河区xx镇xx路xx号。识别后请仔细检查地址是否有误!"></textarea>
			<view class="copy-btns">
				<button class="clear" @click="copyAddress = ''" size="mini" type="default">清空</button>
				<button @click="copyFn" size="mini" type="primary">识别</button>
			</view>
		</view>
		<view class="address-form">
			<form :model="form" label-width="130"  ref="uForm">
				<view style="display: flex;border-bottom:1px solid #dbdbdb;padding:20rpx 0;">
					<text style="padding-right:10rpx;">姓名:</text><input v-model="form.name" placeholder="请输入姓名" />
				</view>
				<view style="display: flex;border-bottom:1px solid #dbdbdb;padding:20rpx 0;">
					<text style="padding-right:10rpx;">手机号：</text>
					<input v-model="form.mobile" placeholder="请输入手机号" />
				</view>
				<view style="align-items: center;justify-content:space-between;display: flex;border-bottom:1px solid #dbdbdb;padding:20rpx 0;">
					<view style="padding-right:10rpx;width:140rpx;">所属省份:</view>
					<picker @change="confirmFn" :value="form.defaultRegion" mode="region">
						<text class="address-form-province" v-text="form.region?form.region:'请选择'"></text>
					</picker>
				</view>
				<view style="display: flex;border-bottom:1px solid #dbdbdb;padding:20rpx 0;">
					<text style="padding-right:10rpx;white-space: nowrap;">详细地址:</text>
					<textarea style="height:60rpx;" v-model="form.print_addr" placeholder="请输入详细地址" /></view>
			</form>
			<view style="padding-top:20rpx;font-weight: 600;">解析数据结构：</view>
			<view style="word-break: break-all;" v-text="result"></view>
			
		</view>
	</view>
</template>

<script>
	import {AddressParse} from './lib/addressParseBundle.js';
	export default {
		components:{
		},
		data() {
			return {
				copyAddress:'刘二狗 13500000000 广东省广州市天河区xx镇xx路xx号',
				// copyAddress:'',
				form:{
					name:'',
					mobile:'',
					print_addr:'',
					region:'',
					province:'',
					city:'',
					area:'',
					district:'',
					defaultRegion:[]
				},
				result:''
			}
		},
		methods: {
			confirmFn(res){
				console.log(res)
				const region = `${res.detail.value[0]} ${res.detail.value[1]} ${res.detail.value[2]}`;
				const defaultRegion = [res.detail.value[0],res.detail.value[1],res.detail.value[1]];
				this.$set(this.form,'province',res.detail.value[0]);
				this.$set(this.form,'city',res.detail.value[1]);
				this.$set(this.form,'area',res.detail.value[2]);
				this.$set(this.form,'region',region);
				this.$set(this.form,'defaultRegion',defaultRegion);
			},
			copyFn(){
				const [result] = AddressParse.parse(this.copyAddress);
				console.log(result);
				if(!result){
					return uni.showToast({
						title:'请输入需要解析地址',
						icon:'none',
						mask:true
					})
				}
				this.$set(this.form,'defaultRegion',[]);
				this.result = JSON.stringify(result);
				// 识别不出来
				if(!result.province || !result.city){
					return uni.showModal({
						title:'地址识别有误，请修改地址正确格式',
						content:'姓名、手机号和地址用空格分开:如 张三 13500000000 广东省广州市天河区xx镇xx路xx号。识别后请仔细检查地址是否有误!',
						showCancel: false
					});
				}
				if(result.province === '北京'){
					result.province = '北京市'
				}
				if(result.province === '天津'){
					result.province = '天津市'
				}
				if(result.province === '上海'){
					result.province = '上海市'
				}
				if(result.province === '重庆'){
					result.province = '重庆市'
				}
				if(result.province.indexOf('市')>-1){
					result.city = '市辖区'
				}
				if(result.province === '广东省' && (result.city === '东莞市' || result.city === '中山市')){
					result.area = result.city === '东莞市' ? '东莞市' : '中山市'
				}
				// 修复江苏省徐州市徐州经济技术开发区自动识别错误bug
				if(result.province === '江苏省' && result.city === '徐州市' && result.area === '' && /^经济技术开发区/.test(result.details)){
					result.area = '徐州经济技术开发区'
					result.details = result.details.replace(/^经济技术开发区/,'')
				}
				this.form.province = result.province || '';
				this.form.city = result.city || '';
				this.form.district = result.area || '';
				this.form.region = `${result.province || ''} ${result.city || ''} ${result.area || ''}`;
				const defaultRegion = [result.province || '',result.city || '',result.area || ''];
				if(result.province && result.city && result.area){
					this.$set(this.form,'defaultRegion',defaultRegion);
				}
				this.form.print_addr = (result.details || '');
				this.form.name = result.name || '';
				this.form.mobile = result.mobile || '';
			}
		},
		onLoad(option){
			
		}
	}
</script>

<style lang="less" scoped>
@expressDetail: address;
//链接跳转箭头
.setLinkArrows(@width:20rpx,@bWidth:4rpx,@bColor:#b2b2b2,@right:30rpx,@top:50%,@transY:-50%,@rotate:45deg){
	&:after{
		content: "";
		width:@width;
		height:@width;
		border-top-width: @bWidth;
		border-right-width:@bWidth;
		border-top-style: solid;
		border-right-style: solid;
		border-top-color: @bColor;
		border-right-color:@bColor;
		position: absolute;
		right:@right;
		top:@top;
		transform: translateY(@transY) rotate(@rotate);
	}
}
.@{expressDetail} {
	.copy{
		background-color: #fff;
		padding:30rpx;
		margin:0 30rpx 20rpx;
		border-radius: 16rpx;
		border:1px solid #dbdbdb;
		margin-top: 20rpx;
		&-input{
			width:100%;
			line-height: 1.5;
			height:150rpx;
		}
		&-btns{
			text-align: right;
			margin-top: 10rpx;
			border-top:1px solid #dbdbdb;
			padding-top:20rpx;
			.clear{
				margin-right: 30rpx;
			}
			/deep/ button{
				padding:0 40rpx;
			}
		}
	}
	&-form{
		background-color: #fff;
		padding:30rpx;
		margin:20rpx 30rpx 30rpx;
		border-radius: 16rpx;
		&-province{
			padding-right: 30rpx;
			position: relative;
			.setLinkArrows(@right:0);
			text-align: right;
		}
	}
}
.top-tips{
	background-color: #ffe6e6;
	padding:20rpx;
	color:#fa3534;
	font-size:26rpx;
	margin:0 30rpx;
}
</style>
